import React, { useState } from 'react';
import styled from 'styled-components';
import { View, TouchableOpacity, Text } from 'react-native';

const Tabs = ({ title, color, borderWidth, clicked, currentTab }) => {
  return (
    <View style={{ flex: 1 }}>
      <Container
        onPress={() => {
          currentTab(title);
          clicked();
        }}
        style={{
          borderBottomWidth: borderWidth
        }}>
        <Title style={{ color: color }}>{title}</Title>
      </Container>
    </View>
  );
};

const Container = styled(TouchableOpacity)`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-color: purple;
`;
const Title = styled.Text`
  font-size: 14;
`;

export default Tabs;
